<template>
	<view class="deliery">
		<view class="title">提货</view>
		<view class="space-between number" v-if="methodAll.type=='normal'"><view>数量</view> <uni-number-box :min="1" :value="1" :max="methodAll.num" @change="bindChange" background="#E3EFFE" ></uni-number-box></view>
		<view class="space-between number">
			<view>提货方式</view>
			<view class="flex-end">
				<view class="choice" v-for="(item,index) in methodList" :key='item.id' @click="()=>storkID=item.id">
					<uni-icons :type="storkID==item.id?'checkbox-filled':'circle'" size="20" 
					:color="storkID==item.id?'#41A3FF':'#666'"></uni-icons><text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit()">确定</view>
	</view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import { ref } from 'vue';
import { errorToast, successToast,showLoading } from '@/utils/prompt';
import { getDriverID } from '@/stores/driverID';
import { toPublish } from '@mqtt';
/**
 * 提货弹框
 * @param user_id  用户ID
 * @param methodList  提货方式列表
 * @param methodAll  提货商品数据
 * @param storkID  提货方式ID
 * @param storkNum  提货数量
 */
const user_id = getDriverID();
const props = defineProps({
  methodList: { type: Array },
  methodAll: { type: Object },
});

const storkID = ref('');
const repeat = ref(true); //放重复点击
if (props.methodList.length == 1) {
  storkID.value = props.methodList[0].id;
}
const storkNum = ref(1);
/**
 * 提货数量
 * @param {Object} e 提货数据变换
 * @param storkNum 提货数量
 */
function bindChange(e: any) {
  storkNum.value = e;
}
const emit = defineEmits(['submit']);
/**
 * 提交提货
 * @param user_id  用户ID
 * @param id  商品ID
 * @param goods_nums  提货数量
 * @param dispatch_id  提货方式ID
 */
function submit() {
  if (!storkID.value) {
    errorToast('请选择提货方式');
    return;
  }
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    user_id,
    id: Number(props.methodAll.id),
    goods_nums: storkNum.value,
    dispatch_id: Number(storkID.value),
  };
  toPublish('store/addHexiaoOrder', payload, (obj: any) => {
    const { code, msg, data } = obj;
    console.log(JSON.stringify(data));
    if (code === 1) {
      emit('submit');
      successToast(msg);
      setTimeout(() => {
		repeat.value = true;
        navTo('groupBenefits/deliveryDetail?id=' + data.order_id + '&type=' + props.methodAll.type);
      }, 1000);
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}
</script>
<style scoped lang="less">
.deliery {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 30rpx 30rpx 0px 0px;
  .title {
    font-size: 34rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15rpx;
  }
  .number {
    width: 100%;
    margin: 15rpx 0px;
    view {
      font-size: 30rpx;
      font-weight: 400;
      color: #333333;
    }
    .choice {
      display: flex;
      align-items: center;
      margin-right: 15rpx;
      text:nth-last-of-type(1) {
        margin-left: 5rpx;
      }
    }
  }
  .submit {
    margin-top: 15rpx;
    width: 210rpx;
    height: 72rpx;
    background: linear-gradient(104deg, #41a3ff, #1b91ff);
    border-radius: 5px;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 72rpx;
  }
}
</style>
<style>
.number >>> .uni-numbox-btns {
  background-color: transparent !important;
  background: transparent !important;
}
</style>